<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <!--
           盒子：
               CSS在处理网页时，它认为每个元素都包含在一个不可见的盒子里。

           为什么要想象成盒子呢？
               因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。我们只需要将相应的盒子摆放在相应的位置即可完成网页的布局。

          盒子模型：
               一个盒子我们会分为几个部分：
                   内容区-content
                   内边距-padding
                   边框-border
                   外边距-margin
       -->

    <style type="text/css">
        /*

        */
        .box1 {
            background-color: aqua;
            width: 400px;                   /*使用width来设置盒子内容区的宽度*/
            height: 400px;                  /*使用height来设置盒子内容区的高度*/

            /*
                要为元素设置边框必须指定三个样式:宽度、颜色、样式
            */
            /*为边框设置宽度*/
            /*border-width: 20px;*/

            /*
                使用border-width 可以分别指定四个边框的宽度
                四个值分别是上右下左
                如果指定三个值：上 左右 下
                如果指定两个值： 上下 左右
                如果指定一个值： 上下左右

                除了border-width，css中还提供了四个border-xxx-width, xxx的值可能上上下左右 top right bottom left，专门用来设置指定边的宽度
            */
            border-width: 10px 20px 20px 40px;

            /*颜色同理*/
            border-color:chartreuse red blue;        /*设置边框的颜色*/


            /*
                样式同理：
                可选值：none  默认值 没有边框
                        solid 实线边框
                        dotted 点状边框
                        dashed 虚线
                        double 双线
            */
            border-style: solid double;            /*设置边框的样式*/

        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: chartreuse;

            /*
                border属性：
                    边框的简写样式，通过它可以同时设置四个边框的样式，宽度、样式、颜色，而且没有顺序要求
                    border一指定就是同时指定四个边的宽度、样式和颜色，不能分别指定

                    border-xxx: border-top border-right border-bottom border-left  可以单独指定四个边的样式
            */
            border: 10px #123123 solid;
        }

        .box3{
            /*
                需求：给div的三个边都设置成 红色 10个像素 实线边框，维度为上下左
            */
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            border:10px red solid;
            border-right: none;
        }
    </style>
</head>
<body>


    <div class="box1"></div>
    <div class="box2"></div>

    <div class="box3"></div>
</body>
</html>